<template>
  <div id="buycar">
    <van-nav-bar :title="'购物车' + '(' + list.length + ')'" />
    <div class="buycar-box-button">
      <span @click="handleClick">编辑</span>
    </div>
    <div class="buycar-box">
      <van-empty
        class="custom-image"
        image="https://img1.baidu.com/it/u=2295028974,445299052&fm=26&fmt=auto&gp=0.jpg"
        description="您的购物车是空的"
        v-if="!list.length > 0"
      />
      <ul v-if="list.length > 0">
        <li v-for="(item, index) in list" :key="index">
          <van-swipe-cell>
            <div class="checkbox">
              <van-checkbox v-model="checked"></van-checkbox>
              <div class="img">
                <img :src="item.thumb" alt="" />
              </div>
              <div class="detail">
                <p>{{ item.title }}</p>
                <p>单价：{{ item.price }}</p>
                <p>
                  数量：<van-stepper
                    v-model="item.num"
                    theme="round"
                    button-size="22"
                    disable-input
                  />
                </p>
              </div>
            </div>

            <template #right>
              <van-button
                @click="remove(index)"
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </li>
      </ul>
    </div>
    <div class="settle-accounts">
      <van-submit-bar
        :price="10100"
        button-text="提交订单"
        @submit="onSubmit"
        :loading="lod"
        :disabled="!list.length"
      >
        <van-checkbox v-model="checked">全选</van-checkbox>
        <template #tip v-if="checked">
          你的收货地址不支持同城送,
          <span @click="onClickEditAddress">修改地址</span>
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import {
  Stepper as VanStepper,
  Empty as VanEmpty,
  SubmitBar as VanSubmitBar,
  SwipeCell as VanSwipeCell,
} from "vant";

import { useStore } from "vuex";
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
export default {
  components: {
    VanStepper,
    VanEmpty,
    VanSubmitBar,
    VanSwipeCell,
  },
  setup() {
    const store = useStore();
    const lod = ref(false);
    const { handleClick } = route();
    const { onSubmit } = submit(lod, list);
    const checked = ref(false);
    const remove = (index) => {
      list.value.splice(index, 1);
    };
    const list = computed(() => store.state.box);

    return {
      handleClick,
      list,
      onSubmit,
      checked,
      lod,
      remove,
    };
  },
};
const submit = (lod, list) => {
  const router = useRouter();
  const onSubmit = () => {
    (lod.value = true),
      setTimeout(function () {
        lod.value = false;
      }, 2000);
    console.log(list);
    router.push("/Confirm_order");
  };
  return {
    onSubmit,
  };
}; //跳转路由到结账页面
const route = () => {
  const router = useRouter();
  const handleClick = () => {
    router.push("/home");
    console.log(1);
  };
  return {
    handleClick,
  };
}; //跳转路由到一级路由编辑
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
  width: 80px;
}
#buycar {
  width: 375px;
  background: white;
}
#buycar > .buycar-box {
  width: 375px;
  height: 451px;
  padding: 0 15px;
  /* display: flex;
  justify-content: center; */
}
.checkbox {
  width: 345px;
  height: 100px;
  display: flex;
  margin-bottom: 10px;
}
.checkbox .detail {
  flex: 1;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}
.checkbox .detail p,
.van-stepper {
  display: inline-flex;
  align-items: center;
  margin-bottom: 5px;
}
.checkbox > .img {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 15px;
}
.checkbox > .img img {
  width: 80px;
  height: 80px;
}
.buycar-box-button {
  display: flex;
  justify-content: flex-end;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.buycar-box-button > span {
  color: orange;
}
.van-nav-bar__title {
  font-size: 18px;
  font-weight: 800;
}
.custom-image {
  margin-top: 50px;
}
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
.van-submit-bar {
  position: fixed;
  bottom: 50px;
}
</style>
